<template>
	<view class="container">
		<view class="item">
			<view class="icon">
				<image src="../../static/icon/zhiwen.png" mode=""></image>
			</view>
			<view class="title">
				当前设备是否支持指纹识别
			</view>
			<view class="content">
				{{fingerPrintSupport?'支持':'不支持'}}
			</view>
		</view>
		
		<view class="item">
			<view class="icon">
				<image src="../../static/icon/luru.png" mode=""></image>
			</view>
			<view class="title">
				当前设备是否已录入指纹信息
			</view>
			<view class="content">
				{{isEnrolled?'已录入':'未录入'}}
			</view>
		</view>
		
		<view class="item" v-if="fingerPrintSupport && isEnrolled">
			<view class="icon">
				<image src="../../static/icon/kaiqi.png" mode=""></image>
			</view>
			<view class="title">
				开启/关闭指纹识别认证
			</view>
			<view class="content">
				<switch :checked="enableFingerPrint" @change="switch1Change" />
			</view>
		</view>				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fingerPrintSupport:false,
				isEnrolled:false,
				enableFingerPrint:false
			}
		},
		methods: {
			//开启关闭指纹识别
			switch1Change: function (e) {
				this.enableFingerPrint = e.target.value
				uni.setStorageSync('enableFingerPrint',this.enableFingerPrint)
			},			
		},
		onLoad() {
			//当前设备是否支持指纹识别			
			uni.checkIsSupportSoterAuthentication({
				success:(res)=> {
				   this.fingerPrintSupport = res.supportMode.indexOf('fingerPrint')>=0?true:false				   
				},
				fail:(err)=> {
					console.log(err);
				}
			})
									
			//是否已录入指纹信息
			uni.checkIsSoterEnrolledInDevice({
			    checkAuthMode: 'fingerPrint',
			    success:(res)=> {
			       this.isEnrolled = res.isEnrolled				   
			    },
			    fail:(err)=> {
			    	console.log(err);
			    }
			})
			
			//读取当前是否开启指纹识别设置
			this.enableFingerPrint = uni.getStorageSync('enableFingerPrint')			
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}
	
	.container {
		padding: 15rpx;
	}
	
	.item {
		height: 80rpx;
		display: flex;
		margin-bottom: 30rpx;		
		font-size: 30rpx;
		color: #959595;
	}
	
	.item .icon {
		display:flex;
		align-items:center;
		justify-content:center;
	}
	
	.item .icon image {
		width: 50rpx;
		height: 50rpx;		
	}
	
	.item .title {
		line-height: 80rpx;
		margin-left: 20rpx;
		border-bottom: 1px solid #EEEEEE;
		width: 650rpx;
	}
	
	.item .content {
		line-height: 80rpx;
		position: absolute;
		right: 30rpx;
	}
	
</style>